<template>
    <div class="boxs">
       <div class="logins">
         <h2 style="text-align: center;color: #fff;">登陆-行知</h2>
         <el-divider></el-divider>
         <div class="group">
            <el-tag size="small">账号</el-tag>
            <el-input v-model="account"></el-input>
         </div>
         <div class="group">
            <el-tag size="small">密码</el-tag>
            <el-input type="password" v-model="password"  show-password></el-input>
        </div>
        <div class="group">
         <el-button style="width: 100%;" :disabled="account==''|| password==''" type="primary" @click="login">登录</el-button>
        </div>
          <div style="text-align: center;color:  rgb(103, 194, 58);; font-size: 13px;font-weight: 700;margin-top: 20px;">愿每个人的努力都能开花结果</div>
       </div>
       <!-- color: rgb(103, 194, 58); -->
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import type LoginData from "@/dto/LoginDto"
import {logins} from "@/api/login"
import { useRouter } from 'vue-router'
import myTokens from "@/utils/auth"
import {openLoad,closeLoad} from "@/utils/loading"
import { ElMessage } from 'element-plus'
// import router from '@/router'



export default defineComponent({
     
    setup() {
       const router=useRouter();
      const data=reactive<LoginData>({
         account:"19918734771",
         password:"888888"
      })

      const events={
          login:()=>{
            openLoad("登陆中");
            setTimeout(() => {
               logins({account:data.account,password:data.password}).then((res:any)=>{
               if(res.result==0){
                  closeLoad();
                  myTokens.setToken(res.data.token);
                  router.push('/');
               }else{
                  closeLoad();
                  ElMessage.error(res.message);
                  data.password=""
               }
 
            })
            }, 2000);
            
          }
      }
        
      return{
        ...toRefs(data),
        ...events
      }
    }
})
</script>
<style scoped>
 .boxs{
  width: 100vw;
  height: 100vh;
  background: url("../../assets/login-bg.jpg") no-repeat center center;
  background-size: 100% 100%;
  overflow: hidden;
 }
 .logins{
    margin: 0 auto;
    width: 400px;
    height: 400px;
    margin-top: 100px;
    border: 1px solid #eee;
    background:rgba(255,255,255,.4);
    padding: 15px;
   border-radius: 5px;
 }
 .group{
    margin-top: 20px;
 }
</style>


<!-- 
<template>
  <div>
    <div style="width: 600px; height: 600px; border: 1px solid #000;margin-left:50px;">
      
      <div class="parent">
        <div class="son">323234555</div>
      </div>324234
    </div>
  </div>




</template>
<script>
export default {
   data:()=>{
      return{

      }
   },
   methods:{
      test1(){
         const mySet1 = new Set([1,2,3,4,5]);
         mySet1.add({name:"杨",age:18}).add()
         console.log(mySet1.has({name:"张",age:18}));
         console.log([...mySet1],mySet1);


      },
   },
   mounted:function(){
      this.test1();
   }
}
</script>
<style>
.son {
   /* flex: 1; */
  width: 200px;
  height: 200px;
  background-color: pink;
  transform: rotate(20deg);
  
}
.parent {
   display: flex;
    border: 1px solid rgb(28, 35, 174);

}
</style> -->